<template>
    <n-form
        ref="formRef"
        label-placement="left"
        :label-width="80"
        :model="form"
        :rules="rules"
    >
        <n-grid cols="2" x-gap="24">
            <n-gi>
                <n-form-item :span="12" label="名称" path="name">
                    <n-input v-model:value="form.name" />
                </n-form-item>
                <n-form-item :span="12" label="微信号" path="wechatId">
                    <n-input v-model:value="form.wechatId" />
                </n-form-item>
                <n-form-item :span="12" label="简介">
                    <n-input v-model:value="form.briefInfo" type="textarea" />
                </n-form-item>
                <n-form-item :span="12" label="备注">
                    <n-input v-model:value="form.remark" type="textarea" />
                </n-form-item>
                <n-form-item :span="12" label="平台类型" path="type">
                    <jb-radio-group
                        v-model:value="form.type"
                        value-to-number
                        url="/api/admin/wechatMpinfo/typeOptions"
                    ></jb-radio-group>
                </n-form-item>
                <n-form-item :span="14" label="主体类型" path="subjectType">
                    <jb-radio-group
                        v-model:value="form.subjectType"
                        value-to-number
                        url="/api/admin/wechatMpinfo/subjectTypeOptions"
                    ></jb-radio-group>
                </n-form-item>
                <n-form-item :span="12" label="是否认证" path="isAuthenticated">
                    <jb-radio-group
                        v-model:value="form.isAuthenticated"
                        :value-to-boolean="true"
                        url="/api/admin/dictionary/options?typeKey=options_boolean"
                    ></jb-radio-group>
                </n-form-item>
            </n-gi>
            <n-gi>
                <!--		头像	二维码		-->
                <div class="flex flex-col items-center">
                    <div class="flex items-center flex-col mb-20">
                        <span class="block mb-16px" style="font-size: 24px">头像LOGO</span>
                        <jb-avatar v-model:src="form.logo" :upload="true" width="100"></jb-avatar>

                    </div>
                    <div class="flex items-center flex-col mb-20">
                        <span class="block mb-16px" style="font-size: 24px">二维码</span>
                        <jb-avatar v-model:src="form.qrcode" :upload="true" width="100" :round="false" :fallbackSrc="fallbackImgSrc"></jb-avatar>
                    </div>
                </div>
            </n-gi>
        </n-grid>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'
import fallbackImgSrc from '@/assets/imgs/_builtin/default_qrcode.png?url'

const props = withDefaults(
    defineProps<{
        id: string
    }>(),
    {
        id: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface BucketType {
    id: string
    name: string
    wechatId: string
    briefInfo: string
    remark: string
    logo: string
    qrcode: string
    type: number
    subjectType: number
    isAuthenticated: boolean
}
const form = useResetableData<BucketType>({
    id: '',
    name: '',
    wechatId: '',
    briefInfo: '',
    remark: '',
    logo: '',
    qrcode: '',
    type: 1,
    subjectType: 1,
    isAuthenticated: false
})
const rules: FormRules = {
    name: new Rules().required('请输入公众平台名称').value,
    type: new Rules().required('请选择平台类型').value,
    subjectType: new Rules().required('请选择主体类型').value,
    isAuthenticated: new Rules().required('请选择是否认证').value
}

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()
    let url = props.id
        ? '/api/admin/wechatMpinfo/update'
        : '/api/admin/wechatMpinfo/save'
    await JBoltApi.tryPost(url, form)
    return true
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/wechatMpinfo/${props.id}`).then(
        ({ error, result }) => {
            if (error) return
            form._reset(result.data)
        }
    )
}




onMounted(() => {
    if (props.id) {
        loadEditData()
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
